<!-- 基于PayInfo表的基础增删改查组件 -->
<template>
  <div id="container">
    <!-- 新增按钮 -->
    <el-button type="primary" @click="addRow">新增</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column
          v-for="(item, index) in tableTitle"
          :key="index"
          :prop="item.prop"
          :label="item.label"
      >
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editRow(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑/新增对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="编辑/新增" @close="closeDialog">
      <el-form ref="form" :model="currentRow" :rules="formRules" label-width="80px">
        <el-form-item v-for="(item, index) in tableTitle"
                      :key="index"
                      :rules="formRules"
                      :label="item.label"
                      :prop="item.prop">
          <el-input v-model="currentRow[item.prop]"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveRow">保存</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 表格标题
      tableTitle: [
        {prop: "id", label: "自增主键"},
        {prop: "openId", label: "用户微信识别码"},
        {prop: "transactionId", label: "交易订单号"},
        {prop: "testStatus", label: "是否完成测试"},
        {prop: "finishTime", label: "测试完成时间"},
        {prop: "testResult", label: "测试结果"},
      ],
      tableData: [], // 表格数据
      dialogVisible: false, // 新增/编辑框是否出现
      currentRow: {}, // 当前编辑的行数据
      // 分页组件相关数据
      //当前显示页
      currentPage: 1,
      // 每页显示条数
      pageSize: 10,
      // 总条数
      total: 100,
      // 判断弹出的模态框是否是新增
      isAddFlag: false,
      // 表单校验规则-必填
      formRules: [
        {required: true, message: '该字段不能为空', trigger: 'blur'}
      ]
    };
  },
  mounted() {
    // 获取表格数据（分页查询）
    this.getTableData();
  },
  methods: {
    // 获取表格数据（分页查询）
    async getTableData() {
      // 封装请求参数
      // 拼接条件参数（默认查询第1页的10条数据）
      const param = `page=${this.currentPage}&size=${this.pageSize}`;
      const {data: {data: res}} = await axios.get("http://localhost:8066/payInfos/page?" + param);
      this.tableData = res.records;
      this.total = res.total;
    },
    // 分页组件-改变size
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    // 分页组件-改变page
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 添加按钮触发
    addRow() {
      this.isAddFlag = true;
      this.currentRow = {};
      this.dialogVisible = true;
    },
    // 编辑按钮触发
    editRow(index, row) {
      this.isAddFlag = false;
      this.currentRow = {
        ...row
      };
      this.dialogVisible = true;
    },
    // 删除按钮触发
    async deleteRow(row) {
      if (!confirm("永久删除此条数据, 是否继续?")) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        return false;
      }
      // 确定删除，根据uid删除
      const res = await axios.delete("http://localhost:8066/payInfos/" + row.uid)

      // TODO 自定义判断状态

      this.$message.success("删除成功!"); // 成功提示
      // 处理删除页最后一个数据不跳转上一页问题
      if (this.tableData.length - 1 == 0 && this.currentPage != 1) {
        this.currentPage -= 1;
      }
      this.getTableData(); // 重新获取表格数据
    },
    // 关闭"新增/编辑框"
    closeDialog() {
      this.dialogVisible = false;
    },
    // 新增/编辑框内点击"保存"按钮
    async saveRow() {
      // 验证表单，是否输入为空
      const valid = await this.$refs.form.validate();
      if (!valid) {
        return false;
      }
      // 判断当前模态框是否是"添加"模态框
      if (this.isAddFlag) {
        // 添加逻辑
        const res = await axios.post("http://localhost:8066/payInfos", this.currentRow);
        // TODO自定义判断返回，是否成功。

        this.$message.success("添加成功!"); // 成功提示。
        this.getTableData(); // 重新获取数据
        this.dialogVisible = false; // 关闭新增窗口
      } else {
        // 编辑逻辑
        const res = await axios.put("http://localhost:8066/payInfos", this.currentRow);
        // TODO自定义判断返回，是否成功。

        this.$message.success("修改成功!"); // 成功提示。
        this.getTableData(); // 重新获取数据
        this.dialogVisible = false; // 关闭修改窗口
      }
    }
  }
};
</script>

<style scoped>

</style>
